<template>
  	<div id="shop_list" @click="door_to_door_ruler=true">
      	<div class="shop">
			<div class="img">
				<img :src="logo" :alt="brand_name" :title="brand_name" />
			</div>
        	<div class="shop_cont">
				<h1>{{brand_name}}
					<!-- <span>
						{{brand_name.slice(0,brand_name.toLowerCase().indexOf(searchVal.toLowerCase()))}}
					</span>
					<span style="color:#F30213">
						{{brand_name.slice(brand_name.toLowerCase().indexOf(searchVal.toLowerCase()),brand_name.toLowerCase().indexOf(searchVal.toLowerCase())+searchVal.length)}}
					</span>
					<span>{{brand_name.substr(brand_name.toLowerCase().indexOf(searchVal.toLowerCase())+searchVal.length)}}</span> -->
				</h1>
          		<div class="tag">
					  <div class="cont" v-for="(item,index) in category_name" :key="index">
							<span v-if="index<6">{{item}}</span>
					  </div>
          		</div>
          		<div class="evaluation">
					<div class="rate">
						<Rate disabled :size="10" ico="md-star" v-model="Rate" />
						<!-- <span>5分</span> -->
					</div>
					<div class="evaluation_cont">
						<!-- <p>“评价内容评价内容评价内容评价内容评价”</p> -->
						<nuxt-link to="/">
							<span>0条评论>></span>
						</nuxt-link>
					</div>
          		</div>
          		<div class="des">
            		<div class="number">{{appoin_num||0}}人已预约</div>
            		<div class="address" v-show="shopAddress">
              			<p>{{shopAddress}}</p>
						<!-- <nuxt-link to="/">
							<span>查看</span>
						</nuxt-link> -->
						<span>查看</span>
            		</div>
          		</div>
        	</div>
			<div class="btns">
				<Button type="error" @click="setStoreAppointmentNum">预约上门量尺</Button>
				<div class="tel">{{phone}}</div>
			</div>
      	</div>
      	<div class="goods" v-show="false">
			<div class="goods_item">
				<div class="img">
					<img src="~/static/image/1.png" alt="" />
				</div>
				<h2>精品老板椅沙发椅办公椅</h2>
				<div class="colors">
					<span :style="{ backgroundColor: '#ffffff' }"></span>
					<span :style="{ backgroundColor: '#333333' }"></span>
					<span :style="{ backgroundColor: '#999999' }"></span>
					<span :style="{ backgroundColor: '#f565f4' }"></span>
				</div>
			</div>
        	<div class="goods_item">
				<div class="img">
					<img src="~/static/image/1.png" alt="" />
				</div>
            	<h2>精品老板椅沙发椅办公椅</h2>
				<div class="colors">
					<span :style="{ backgroundColor: '#333333' }"></span>
					<span :style="{ backgroundColor: '#999999' }"></span>
					<span :style="{ backgroundColor: '#f565f4' }"></span>
				</div>
        	</div>
      	</div>
		<!-- 上门尺量弹窗 -->
		<DoorToDoorRuler :citys="citys" :target_id="target_id" :is_show="door_to_door_ruler" @onClose="onCloseRuler"/>
    </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import DoorToDoorRuler from "~/components/DoorToDoor_ruler.vue"
export default {
	components: {
		DoorToDoorRuler
	},
	props: {
		searchVal:{
			type:String,
			default:''
		},
		logo:{
			type:String,
			default:''
		},
		brand_name:{
			type:String,
			default:''
		},
		phone:{
			type:String,
			default:''
		},
		category_name:{
			type:Array,
			default:[]
		},
		shopAddress:{
			type:String,
			default:''
		},
		appoin_num:{
			type:Number,
			default:''
		},
		target_id:'',
		citys:{}
    },
	data() {
		return {
			Rate:0,
			title:'一起家具网一起家具网迪欧',
			door_to_door_ruler:false,//是否展示上门尺量弹窗
		};
	},
  	created() {},
	computed: {
		...mapState(["address"]),
	},
  	methods: {
	  	onCloseRuler(){
			this.door_to_door_ruler = false
		},
		async setStoreAppointmentNum(){
			let{data:{code,data}} = await this.$http.post(this.$API.setStoreAppointmentNum,{
				store_id:this.target_id
			})
			this.door_to_door_ruler=true
		}
  	},
};
</script>
<style scoped>
	#shop_list{
		padding-top: 30px;
		border-bottom: 1px solid #eeeeee;
		cursor: pointer;
	}
	#shop_list .shop{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 37px;
	}
	#shop_list .shop .img{
		width: 100px;
		height: 100px;
		border: 1px solid #CCCCCC;
		border-radius: 6px;
		text-align: center;
		line-height: 100px;
		overflow: hidden;
		font-size: 0;
	}
	#shop_list .shop .img img{
		max-width: 100px;
		max-height: 100px;
		vertical-align: middle;
	}
	#shop_list .shop .shop_cont{
		width: 450px;
		margin-left: 25px;
	}
	#shop_list .shop .shop_cont h1{
		font-size: 0;
		padding-right: 30px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 18px;
		font-weight: 400;
		color: #333333;
	}
	#shop_list .shop .shop_cont h1 span{
		font-size: 18px;
		font-weight: 400;
		color: #333333;
		max-width: 100%;
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	#shop_list .shop .shop_cont h1 span:last-child{
		background:url(~/static/image/ico/rz.png)right center no-repeat;
		background-size: 20px 26px;
		padding-right:30px;
	}
	#shop_list .shop .shop_cont .tag{
		margin-top: 10px;
		display: flex;
		flex-wrap: wrap;
	}
	#shop_list .shop .shop_cont .tag span{
		display: inline-block;
		padding: 4px 10px;
		background: #F0F0F0;
		border-radius: 4px;
		font-size: 12px;
		font-weight: 400;
		color: #666666;
		margin:0px 5px 5px 0;
	}
	#shop_list .shop .evaluation{
		display: flex;
		
	}
	#shop_list .shop .evaluation .rate{
		font-size: 12px;
		font-weight: 400;
		color: #F95B15;
		margin-right: 5px;
	}
	#shop_list .shop .evaluation .rate>>>.ivu-rate{
		font-size: 16px;
	}
	#shop_list .shop .evaluation .evaluation_cont{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 12px;
		font-weight: 400;
		color: #666666;
	}
	#shop_list .shop .evaluation .evaluation_cont p{
		width: 234px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	#shop_list .shop .evaluation .evaluation_cont span{
		font-size: 12px;
		font-weight: 400;
		color: #999999;
		padding-left: 9px;
		border-left: 1px solid #CCCCCC;
		line-height: 12px;
	}
	#shop_list .shop .evaluation>>>.ivu-rate-star{
		margin-right: 0;
	}
	#shop_list .shop .btns{
		margin-left: 116px;
		width: 170px;
	}
	#shop_list .shop .btns button{
		width: 170px;
		height: 44px;
		background: #F30213;
		border-radius: 6px;
		font-size: 18px;
	}
	#shop_list .shop .btns .tel{
		font-size: 18px;
		font-weight: 400;
		color: #333333;
		background:url(~/static/image/ico/tel.png)left center no-repeat;
		background-size: 17px 18px;
		padding-left: 24px;
		margin-top: 10px;
		text-align: center;
	}
	#shop_list .shop .des{
		display: flex;
		font-size: 14px;
		font-weight: 400;
		
	}
	#shop_list .shop .des .number{
		color: #666666;
		margin-right: 21px;
	}
	#shop_list .shop .des .address{
		width:calc(100% - 150px);
		display: flex;
		align-items: center;
		/* justify-content: space-between; */
	}
	#shop_list .shop .des .address span{
		
		color: #F30213;
	}
	#shop_list .shop .des .address p{
		max-width:calc(100% - 30px);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		background: url(~/static/image/ico/b_address.png)left center no-repeat;
		background-size: 11px 13px;
		padding-left: 15px;
		color: #333333;
	}
	#shop_list .goods{
		display: flex;
	}
	#shop_list .goods .goods_item{
		width: 204px;
		margin-right: 15px;
		margin-bottom: 20px;
		font-size: 0;
	}
	#shop_list .goods .goods_item:nth-child(4n){
		margin-right: 0;
	}
	#shop_list .goods .goods_item img{
		width: 100%;
	}
	#shop_list .goods .goods_item h2{
		font-size: 16px;
		font-weight: 400;
		color: #333333;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin: 12px 0 9px 0;
	}
	#shop_list .goods .goods_item .colors span{
		display: inline-block;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		border: 1px solid #cccccc;
		margin:0 6px 6px 0;
	}
</style>
